<template>
  <div class="dashboard-container">
    <div class="totle">
      <div class="mingci">
        <div class="WorkOrderStatistics">
          <div class="left">
            <div class="data">
              <p>工单统计</p>
              <span>2022.10.01 ~ 2022.10.29</span>
            </div>
            <div class="num-sum">
              <div class="num-sum-box">
                <div class="num">
                  {{ total }}
                </div>
                <div class="sum">
                  工单总数(个)
                </div>
              </div>
              <div class="num-sum-box">
                <div class="num">
                  {{ completedTotal }}
                </div>
                <div class="sum">
                  完成工单(个)
                </div>
              </div>
              <div class="num-sum-box">
                <div class="num">
                  {{ workerCount }}
                </div>
                <div class="sum">
                  进行工单(个)
                </div>
              </div>
              <div class="num-sum-box">
                <div class="num">
                  {{ cancelTotal }}
                </div>
                <div class="sum">
                  取消工单(个)
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sell-totle">
          <div class="right">
            <div class="sell">
              <p>销售统计</p>
              <span>2022.10.01 ~ 2022.10.29</span>
            </div>
            <div class="sell-sum">
              <div class="sell-sum-box">
                <div class="num">
                  {{ orderCountNum }}
                </div>
                <div class="sum">
                  订单量(个)
                </div>
              </div>
              <div class="sell-sum-box">
                <div class="num">
                  {{ orderAmountNum }}
                </div>
                <div class="sum">
                  销售额(万元)
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

    <div class="echarts">
      <!-- echarts表格 -->
      <Echarts />
      <div class="hot-gods">
        <div class="header">
          <div class="title">商品热榜
          </div>
          <span class="sub-title">2022.10.01 ~ 2022.10.30</span>
        </div>
        <div v-for="(item,index) in sellArr" :key="index" class="body">
          <div class="jiangpai">{{ index++ + 1 }}</div>
          <div class="name">{{ item.skuName }}</div>
          <div class="count">{{ item.count
          }}单</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUserWorkAPI, orderCountAPI, orderAmountAPI } from '@/api/user'
import { sellReportAPI } from '@/api/goods'
import Echarts from './/components/Echarts.vue'
export default {
  components: {
    Echarts
  },
  data() {
    return {
      UserWorkArr: [],
      cancelTotal: '',
      total: '',
      completedTotal: '',
      workerCount: '',
      orderCountNum: '',
      orderAmountNum: '',
      sellArr: []
    }
  },
  created() {
    this.getUserWork()
    this.orderCount()
    this.orderAmount()
    this.sellReport()
  },
  methods: {
    async getUserWork() {
      const res = await getUserWorkAPI()
      // console.log(res)
      this.UserWorkArr = res.data
      this.cancelTotal = this.UserWorkArr[0].cancelTotal + this.UserWorkArr[1].cancelTotal
      this.total = this.UserWorkArr[0].total + this.UserWorkArr[1].total
      this.completedTotal = this.UserWorkArr[0].completedTotal + this.UserWorkArr[1].completedTotal
      this.workerCount = this.UserWorkArr[0].workerCount + this.UserWorkArr[1].workerCount
    },
    async orderCount() {
      // 获取一定时间范围之内的订单总数
      const res = await orderCountAPI({
        start: '2022-10-01 00:00:00',
        end: '2022-10-30 00:00:00'
      })
      // console.log(res)
      this.orderCountNum = res.data
    },
    async orderAmount() {
      // 获取一定时间范围之内的收入
      const res = await orderAmountAPI({
        start: '2022-10-01 00:00:00',
        end: '2022-10-30 00:00:00'
      })
      // console.log(res)
      this.orderAmountNum = (res.data / 1000000).toFixed(2)
    },
    async sellReport() {
      // 获取销售前几的商品
      const res = await sellReportAPI('10', '2022-10-24', '2022-10-30')
      // console.log(res)
      this.sellArr = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.totle {
  width: 1000px;
  padding-bottom: 30px;
 display: flex;
 .mingci{
  display: flex;
 }
}
.echarts {
  display: flex;
  width: 1260px;
  justify-content: space-between;
}
.WorkOrderStatistics {
  width: 533px;
  height: 166px;
  padding: 0 10px;
  margin-right: 15px;
    background: #e9f3ff;
        background-image: url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat,no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    border-radius: 20px;
   .left{
    padding: 20px;
    .data {
      display: flex;
      align-items: center;
      p {
        margin: 0 5px 0 0;
        font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #333;
      }
      span {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #999;
      }
    }
    .num-sum {
      display: flex;
      .num-sum-box {
        display: flex;
        flex-direction: column;
        width: 25%;
        margin-top: 20px;
      }
    }
    .num {
      height: 50px;
    font-size: 36px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    line-height: 50px;
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    .sum {
     height: 17px;
    margin-top: 3px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #91a7dc;
    line-height: 17px;
    }
   }

}
.sell-totle {
  background: #fbefe8 url(	http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
  width: 449px;
  height: 166px;
  border-radius: 20px;
  padding: 0 10px;
  .right{
    padding: 20px;
  }
  .sell{
    display: flex;
      align-items: center;
      p {
        margin: 0 5px 0 0;
        font-size: 16px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        color: #333;
      }
      span {
        margin-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #999;
      }

  }
    .sell-sum {
      display: flex;

    }
      .sell-sum-box{
        width: 50%;
        margin-top: 15px;
          .num {
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
        color: #ff5757;
      }
      .sum {
        height: 17px;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        color: #91a7dc;
        line-height: 17px;
      }
      }
}
.hot-gods{
  margin-top: -160px;
  padding: 0 20px;
  .header{
    display: flex;
    white-space: nowrap;
    align-items: center;
    .title {

      font-size: 16px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #333;
    }
    .sub-title {
      margin-left: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #999;
    }
  }
  .body {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .jiangpai{
      width: 21px;
    height: 20px;
    background: url();
    color: #8e5900;
    text-align: center;
    }
    .name{
       height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium,PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    }
    .count {
      height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #737589;
    line-height: 20px;
    text-align: right;
    }
  }
}
</style>
